new Vue({
    el: '#app',
    data() {
        return {
            buttonColor: 'initial', // 初始按钮颜色
            phoneList: [//商品
                { isActive: false, id: 1, imgSrc: './static/1.jpg', price: '4399', name: '华为', isSelect: false, num: 1 },
                { isActive: false,  id: 2, imgSrc: './static/2.jpg', price: '2199', name: 'iPhone11', isSelect: false, num: 1 },
                { isActive: false,  id: 3, imgSrc: './static/3.jpg', price: '3299', name: '荣耀', isSelect: false, num: 1 },
                { isActive: false,  id: 4, imgSrc: './static/4.jpg', price: '6299', name: 'iPad', isSelect: false, num: 1 },
                { isActive: false,  id: 5, imgSrc: './static/5.jpg', price: '5699', name: '小米', isSelect: false, num: 1 },
                { isActive: false,  id: 6, imgSrc: './static/6.jpg', price: '7299', name: '液晶电视', isSelect: false, num: 1 },
            ],
            carList: [],//购物车中商品数据
            carList2: [],//购物车中商品数据
            isDisplayCar: false,//是否展示购物车
            isSelect: false,//勾选框状态
            selectAll: false,//全选状态
               // 用来跟踪每个按钮的背景颜色  
        //    buttonColors: '#00C8A6'  
        }
    },
    computed: {
        //价格总数
        totalPrice() {
            var total = 0
            for (i in this.carList) {
                if(this.carList[i].isSelect==true){
                    total += this.carList[i].price * this.carList[i].num
                }
            }
            return total
        },
    },
    methods: {
        //点击图标展示购物车页面
        displayCar() {
            if (this.carList == '') {
                alert('购物车为空，请添加你喜欢的商品')
            } else {
                this.isDisplayCar = !this.isDisplayCar
            }
        },
        //加入购物车页面
        addCar(phone) {
            console.log(phone);
            if (this.carList == '') {
                this.carList.push(phone)
                this.updateIsActive(phone.id, true);  
           
            } else {
                if (this.carList.includes(phone)) {
                    var index = this.carList.indexOf(phone)
                    this.carList[index].num++
                    // this.updateIsActive(phone.id, this.carList[index].num > 1);  
                  
                } else {
                    this.carList.push(phone)
                    this.updateIsActive(phone.id, true);  
                }
               
            }
        },
        updateIsActive(id, isActive) {  
            // 遍历phoneList，更新对应商品的isActive属性  
            this.phoneList.forEach(item => {  
              if (item.id === id) {  
                item.isActive = isActive;  
              }  
            });  
          },
        //删除购物车中单项商品
        deleteA(phone) {
            var isDelete = confirm("确认删除吗？")
            if (isDelete) {
                var index = this.carList.indexOf(phone)
                this.carList.splice(index, 1)
                this.updateIsActive(phone.id, false);  
            }
        },
        //增加商品数量
        addPhone(phone) {
            phone.num++
        },
        //减少商品数量
        jianPhone(phone) {
            if (phone.num > 1) {
                phone.num--
            } else {
                phone.num = 1
            }
        },
        //修改商品数量
        /**
         * 1.全选按钮需求：
         *  选中全选按钮，上面的所有的按钮都会被选中
         *  取消选中按钮，下面的所有按钮也会被取消选中
         * 2.除全选按钮之外的其他按钮需求
         *  其他按钮全部被选中，全选按钮也跟着被选中
         *  其他按钮只要有一个没有被选中，全选按钮也不会被选中
         */
        //全选按钮需求
        selectAllGoods() {
            for (i in this.carList) {
                this.carList[i].isSelect = this.selectAll
            }
        },
        //除全选按钮之外的其他按钮需求
        selectGood() {
            var res=true
            for (i in this.carList) {
                if(this.carList[i].isSelect==false){
                    res=false
                    break
                }
            }
            this.selectAll=res
        },
        //删除全部勾选商品
        deleteAllGoods(phone){
            console.log(phone);
            var isDeleteAll = confirm("确认删除全部已勾选商品吗？")
            if(isDeleteAll){
             
                this.carList=this.carList.filter((item)=>{
                    return item.isSelect!=true
                })    
                // this.updateIsActive(this.carList.id, false);  
                // this.updateIsActive(phone.id, false);              
            }
        }
    }
})
